import React, { Component } from 'react'
import Axios from 'axios';
import { connect } from 'react-redux';
import { collect_action, cancel_collect_action } from '../../store/store';
import { Toast } from 'antd-mobile'
import Header from '../common/Header'
class Shop extends Component {
    constructor()
    {
        super();
        this.state = {
            goodlist:[]
        }
    }
    componentDidMount() {
        Axios.get('/goodlist').then((res) => {
            this.setState({
                goodlist: res.data.list
            })
        })
    }
    render() {
        var item = this.props.history.location.state;
        return (
            <div className="shop-page">
                {/* Header组件 */}
                <Header title="店铺页面" back={<span onClick={() => { this.props.history.go(-1); }}>&lt;</span>}></Header>

                <div className="title">
                    {item.name}
                    <div className="btns">

                        {
                            this.props.collectList.find((i) => { return item.id === i.id }) ?
                                <span onClick={() => { this.props.cancel_collect(item.id); Toast.success('已取消收藏',1,null,false); }}>取消收藏</span> :
                                
                                <span onClick={() => { this.props.collect(item); Toast.success('收藏成功', 10, null, false); } }>收藏</span>
                                
                        }
                        {/* <span>取消收藏</span> */}
                    </div>
                </div>
                {/* 导航 */}


                {/* 列表 */}


            </div>
        )
    }
}

export default connect(
    (state) => {//注入数据
        return {
            collectList: state.collectList
        }
    },
    (dispatch) => {//注入方法
        return {
            collect: (item) => {
                dispatch( collect_action(item) )
            },
            cancel_collect: (id) => {
                dispatch(cancel_collect_action(id));
            }
        }
    }
)(Shop);
